<template>
	<view>
		<view class="bg-white d-flex seach j-center a-center py-2">
			<view class="bg-light-secondary span-18 rounded-50 d-flex py-1 ">
				<u-icon name="search" color="#888888" size="33" class="mx-2"></u-icon>
				<input type="text" confirm-type="search" @confirm="seach_confirm" focus :focus="firstFocus" placeholder="搜索卡号或卡密搜索" v-model="keywords" @input="seachInput" />
			</view>
		</view>
		
		<scroll-view scroll-y="true" :style="{height: scrollHeight}">
			<view v-if="!seach_List.length" class="d-flex flex-column j-center a-center h_100 pb-3">
				<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
				<view class="">{{message=='卡片'?'暂无卡片':''}}</view>
			</view>	
			<view class="wrap deep" v-else>
				<view class="m-2 p-3 bg-white rounded-20" v-for="(item,index) in seach_List" :key="index">
					<view class="mb-1">卡片序列：<text>{{item.card_sn}}</text></view>
					<view class="my-1">卡片密码：<text>{{item.card_password}}</text></view>
					<view class="">截止日期：<text>{{item.formatted_expire_date.substr(0,10)}}</text></view>
					<view class="mb-1" v-if="item.is_saled=='yes'">订单编号：<text>{{item.order_sn}}</text></view>
					<view class="mt-2 font d-flex j-end" v-if="item.is_saled=='no'">
						<view class="goods_card_content_foot" v-for="(goodsItem,goodsIndex) in card_items" :key="goodsIndex" @click="cardOpen(goodsItem,item)">
							<view>{{goodsItem.card_title}}</view>
						</view>
					</view>
					<view class="mt-2 font d-flex j-end" v-if="item.is_saled=='yes'">
						<view class="goods_card_content_foot" v-for="(goodsItem,goodsIndex) in sold_items" :key="goodsIndex" @click="soldOpen(goodsItem,item)">
							<view>{{goodsItem.card_title}}</view>
						</view>
					</view>
				</view>	
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaltImage:'../../static/images/goods/icon_default_image.png',
				seach_List:[], // 在售商品
				goods_id:"", // 商品ID
				scrollHeight:0,// 屏幕高度
				message:"", // 名字
				keywords:"", // 关键字
				card_items:[
					{card_id:1,card_title:"复制卡号/卡密"},
					{card_id:2,card_title:"编辑"},
					{card_id:3,card_title:"删除"},
				],
				sold_items:[
					{card_id:1,card_title:"复制订单号"},
					{card_id:2,card_title:"复制卡号/卡密"},
				],
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.seach').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		onLoad(e) {
			this.goods_id=e.goods_id
			if(e.card){
				this.message=e.card
			}
		},
		methods: {
			// 监听input框
			seachInput(e){
				this.keywords=e.detail.value
			},
			// 搜索
			seach_confirm(){
				this.$H.post("v2/store/virtual/goods/virtualCard",{
					goods_id:this.goods_id,
					keywords:this.keywords
				}).then(res=>{
					this.seach_List=res.data
				})
				console.log(111)
			},
			// 在售
			cardOpen(goodsItem,item){
				if(goodsItem.card_title=='复制卡号/卡密'){
					uni.setClipboardData({
					    data: item.card_sn+item.card_password,
					    success: function () {
					        console.log('success');
					    }
					});
				}else if(goodsItem.card_title=='编辑'){
					uni.navigateTo({
						url:`/pagesA/virtual/virtual-edit-card?edit=编辑&card_id=${item.card_id}`
					})
				}else if(goodsItem.card_title=='删除'){
					this.deleShow=true
					this.dele_id=item.card_id
				}
			},
			// 已售
			soldOpen(goodsItem,item){
				if(goodsItem.card_title=='复制订单号'){
					uni.setClipboardData({
					    data: item.order_sn,
					    success: function () {
					        console.log('success');
					    }
					});
				}else if(goodsItem.card_title=='复制卡号/卡密'){
					uni.setClipboardData({
					    data: item.card_sn+item.card_password,
					    success: function () {
					        console.log('success');
					    }
					});
				}
			},
			// 确认删除
			dele_confirm(){
				this.$H.post("v2/store/virtual/goods/virtualCard/delete",{
					card_id:this.dele_id
				}).then(res=>{
					this.$nextTick(function(){
						this.$H.post("v2/store/virtual/goods/virtualCard",{
							goods_id:this.goods_id
						}).then(ress=>{
							this.virtualCard=ress.data
						})
					})
				})
			},
		}
	}
</script>

<style>
	.icon_no_data{
		width: 250upx;
		height: 250upx;
	}
	.goods_card_content_footer view{
		border: 1px solid #808080;
		padding: 8upx 30upx;
		margin-right: 10upx;
		border-radius: 30upx;
	}
	.goods_card_content_foot view{
		border: 1px solid #808080;
		padding: 8upx 15upx;
		margin-right: 10upx;
		border-radius: 30upx;
	}
</style>
